<script setup lang="ts">
    import { reactive } from 'vue'
    import { AddAuthRealAPI } from '@/api/my'
    import { Toast } from 'vant'
    import UploadImg from '../components/uploadImg.vue'

    const state = reactive({
        name: '',
        number: '',
        idCard_just: '',
        idCard_back: '',
    })

    const leftBack = () => history.back()
    // 提交实名认证
    const submit = async () => {
        if(!state.name){
            Toast('请输入真实姓名')
            return
        }
        if(!state.number){
            Toast('请输入证件号码')
            return
        }
        if(!state.idCard_just){
            Toast('请上传身份证正面')
            return
        }
        if(!state.idCard_back){
            Toast('请上传身份证反面')
            return
        }
    
        const res = await AddAuthRealAPI({
            "user_name": state.name, 
            "cert_no": state.number, 
            "idCard_just": "12", 
            "idCard_back": "21" 
        })
        if(res){
            Toast('提交成功')
            leftBack()
        }else{
            Toast('提交失败')
        }
    }
    const uploadJust = (val: Object) => {
        state.idCard_just = val
    }
    const uploadBack = (val: Object) => {
        state.idCard_back = val
    }
</script>
<template>
    <van-nav-bar
        title="实名认证"
        left-arrow
        @click-left="leftBack"
    />
    <h3>请如实填写信息，平台承诺保障客户的信息安全 </h3>
    <van-field v-model="state.name" label="姓名" placeholder="请输入真实姓名"/>
    <van-field v-model="state.number" label="证件号码" placeholder="请输入证件号码"/>
    <div class="auth-pic">
        <UploadImg text="上传身份证正面照" @uploadChange="uploadJust" />
        <UploadImg text="上传身份证反面照" @uploadChange="uploadBack" />
    </div>
    <button class="wy-submit" @click="submit">提交实名认证</button>
</template>


<style scoped>
h3 {
    width: 100%;
    height: 2.14rem;
    font-weight: 100;
    font-size: 0.75rem;
    color: #FF9415;
    line-height: 2.14rem;
    text-align: center;
    background: #FFF2E3;
}
.auth-pic {
    display: flex;
    justify-content: space-around;
    margin-top: 1.09rem;
}
</style>